<template>
    <div>
        <el-tabs type="border-card">
            <el-tab-pane label="待出库">
                <productadd-list></productadd-list>
            </el-tab-pane>
            <el-tab-pane label="已出库">
                <productadd-list></productadd-list>
            </el-tab-pane>



            <el-tab-pane label="待回收">
                <productadd-list></productadd-list>
            </el-tab-pane>
            <el-tab-pane label="已回收">
                <productadd-list></productadd-list>
            </el-tab-pane>

        </el-tabs>

        <div class="col-md-12" style="border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;">
            <el-col :span="24" style="padding-left: 20px">
                <el-tooltip class="item" effect="dark" content="点击按钮，弹出对话框，选择是显示列内容，不选是隐藏下面的对应列内容（对话框是模拟数据）" placement="top">
                <el-popover placement="bottom" width="300" trigger="click">
                    <el-col :span="12">
                        <el-checkbox v-model="showCustomerCode" @change="showHide('showCustomerCode')">客户代码
                        </el-checkbox>
                    </el-col>
                    <el-col :span="12">
                        <el-checkbox v-model="showCustomerStatus" @change="showHide('showCustomerStatus')">客户状态
                        </el-checkbox>
                    </el-col>
                    <el-col :span="12">
                        <el-checkbox v-model="showCustomerCate" @change="showHide('showCustomerCate')">客户类别
                        </el-checkbox>
                    </el-col>
                    <el-col :span="12">
                        <el-checkbox v-model="showCreditRank" @change="showHide('showCreditRank')">客户信用等级</el-checkbox>
                    </el-col>
                    <el-col :span="12">
                        <el-checkbox v-model="showCreditLine" @change="showHide('showCreditLine')">授信额度</el-checkbox>
                    </el-col>
                    <el-col :span="12">
                        <el-checkbox v-model="showCapital" @change="showHide('showCapital')">注册资金</el-checkbox>
                    </el-col>
                    <el-col :span="12">
                        <el-checkbox v-model="showAnnualSales" @change="showHide('showAnnualSales')">年销售额</el-checkbox>
                    </el-col>
                    <el-col :span="12">
                        <el-checkbox v-model="showBank" @change="showHide('showBank')">对公银行账号</el-checkbox>
                    </el-col>
                    <el-col :span="12">
                        <el-checkbox v-model="showCertificateNo" @change="showHide('showCertificateNo')">开户银行
                        </el-checkbox>
                    </el-col>
                    <el-col :span="12">
                        <el-checkbox v-model="showAddress" @change="showHide('showAddress')">税务登记证号</el-checkbox>
                    </el-col>
                    <el-col :span="12">
                        <el-checkbox v-model="showArea" @change="showHide('showArea')">地址</el-checkbox>
                    </el-col>
                    <el-col :span="12">
                        <el-checkbox v-model="showBrand" @change="showHide('showBrand')">经营面积</el-checkbox>
                    </el-col>
                    <el-col :span="12">
                        <el-checkbox v-model="showBankAccount" @change="showHide('showBankAccount')">模拟，对应列表的列项</el-checkbox>
                    </el-col>

                    <el-button
                            size="small"
                            slot="reference"
                            type="plain"
                            class="setting"
                    >
                        <div style="display: flex; flex-direction: column">
                            <i class="el-icon-setting"></i>
                            <span style="margin-top: 3px">显示设置</span>
                        </div>
                    </el-button>
                </el-popover>
                </el-tooltip>


                <el-button @click="handleButtons(6)" size="small"
                           style="margin-top: 10px;margin-bottom: 10px;" type="plain" class="setting">
                    <div style="display: flex;flex-direction: column;"><i class="el-icon-setting"></i><span
                            style="margin-top: 3px">上报审批</span></div>
                </el-button>

                <el-button @click="handleButtons(6)" size="small"
                           style="margin-top: 10px;margin-bottom: 10px;" type="plain" class="setting">
                    <div style="display: flex;flex-direction: column;"><i class="el-icon-setting"></i><span
                            style="margin-top: 3px">查看关联订单</span></div>
                </el-button>


                <el-button @click="handleButtons(6)" size="small"
                           style="margin-top: 10px;margin-bottom: 10px;" type="plain" class="setting">
                    <div style="display: flex;flex-direction: column;"><i class="el-icon-setting"></i><span
                            style="margin-top: 3px">导出</span></div>
                </el-button>

                <input-search :list="searchList"></input-search>


                <el-button @click="handleDelCustomer(1)" size="small"
                           style="margin-top: 10px;margin-bottom: 10px;float: right" type="plain" class="setting">
                    <div style="display: flex;flex-direction: column;"><i class="el-icon-setting"></i><span
                            style="margin-top: 3px">删除</span></div>
                </el-button>
<!--                <el-button @click="handleButtons(1)" size="small"-->
<!--                           style="margin-top: 10px;margin-bottom: 10px;float: right" type="plain" class="setting">-->
<!--                    <div style="display: flex;flex-direction: column;"><i class="el-icon-setting"></i><span-->
<!--                            style="margin-top: 3px">发短信</span></div>-->
<!--                </el-button>-->

<!--                <el-button @click="handleButtons(3)" size="small"-->
<!--                           style="margin-top: 10px;margin-bottom: 10px;float: right" type="plain" class="setting mr-10">-->
<!--                    <div style="display: flex;flex-direction: column;"><i class="el-icon-setting"></i><span-->
<!--                            style="margin-top: 3px">发邮件</span></div>-->
<!--                </el-button>-->

<!--                <el-button @click="handleButtons(2)" size="small"-->
<!--                           style="margin-top: 10px;margin-bottom: 10px;float: right" type="plain" class="setting mr-10">-->
<!--                    <div style="display: flex;flex-direction: column;"><i class="el-icon-setting"></i><span-->
<!--                            style="margin-top: 3px">发微信</span></div>-->
<!--                </el-button>-->

                <el-tooltip class="item" effect="dark" content="操作：选择下面列表，然后点击按钮" placement="top">

                </el-tooltip>
                <el-button @click="handleSelectionChange(1)" size="small"
                           style="margin-top: 10px;margin-bottom: 10px;float: right" type="plain" class="setting">
                    <div style="display: flex;flex-direction: column;"><i class="el-icon-setting"></i><span
                            style="margin-top: 3px">修改</span></div>
                </el-button>

                <el-button @click="handleSelectionChange(1)" size="small"
                           style="margin-top: 10px;margin-bottom: 10px;float: right;margin-left: 10px;" type="plain"
                           class="setting">
                    <div style="display: flex;flex-direction: column;"><i class="el-icon-setting"></i><span
                            style="margin-top: 3px">新建</span></div>
                </el-button>
            </el-col>

        </div>


        <el-table
                ref="multipleTable"
                :data="tableData"
                show-summary
                border
                stripe
                height="600"
                row-class-name="tableRow"
                header-row-class-name="tableHeader"
                @row-dblclick="handleSelectionChange"
                style="width: 100%;border-top:1px solid #c5c5c5;">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="序号"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="录入日期"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="采购下单日期"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="物品类别"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="采购单号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="审批状态"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="品检状态"
                    width="120">
            </el-table-column>
            <el-table-column
                    v-if="showCustomerCode"
                    prop="province"
                    label="入库状态"
                    width="120">
            </el-table-column>
            <el-table-column
                    v-if="showCustomerStatus"
                    prop="city"
                    label="开票状态"
                    width="120">
            </el-table-column>
            <el-table-column
                    v-if="showCustomerStatus"
                    prop="city"
                    label="开发票状态"
                    width="120">
            </el-table-column>
            <el-table-column
                    v-if="showCustomerCate"
                    prop="address"
                    label="付款状态"
                    width="300">
            </el-table-column>
            <el-table-column
                    v-if="showCreditRank"
                    prop="zip"
                    label="供应商名称"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showCreditLine"
                    prop="zip"
                    label="供应商代码"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showCapital"
                    prop="zip"
                    label="物品名称"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showBankAccount"
                    prop="zip"
                    label="物品代码"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showBankAccount"
                    prop="zip"
                    label="款号"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showBank"
                    prop="zip"
                    label="金料品类"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showBank"
                    prop="zip"
                    label="型号"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showBank"
                    prop="zip"
                    label="规格"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showBank"
                    prop="zip"
                    label="尺寸"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showBank"
                    prop="zip"
                    label="颜色"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showCertificateNo"
                    prop="zip"
                    label="成色"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showBrand"
                    prop="zip"
                    label="单位"
                    width="120">
            </el-table-column>
            <el-table-column
                    v-if="showTrademark"
                    prop="zip"
                    label="数量"
                    width="120">
            </el-table-column>
            <el-table-column
                    v-if="showWebsite"
                    prop="zip"
                    label="重量"
                    width="120">
            </el-table-column>
            <el-table-column
                    v-if="showLperson"
                    prop="zip"
                    label="损耗率"
                    width="120">
            </el-table-column>
            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="损耗重量"
                    width="120">
            </el-table-column>



            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="单价"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="税率"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="金额"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="结款方式"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="结料方式"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="结款方式"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="结料方式"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="结款金额"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="结料克重"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="回损耗方式"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="回损耗重量"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="金价"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="回损耗折现款"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="交货日期"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="物流方式"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="物流费用"
                    width="120">
            </el-table-column>


            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="采购员"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="审批人"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="录入人"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="时间"
                    width="120">
            </el-table-column>

            <el-table-column
                    v-if="showLphone"
                    prop="zip"
                    label="备注"
                    width="120">
            </el-table-column>



        </el-table>


        <el-dialog id="pricesDialog" title="订单操作" :visible.sync="dialogCostoms" style="display:none;"
                   width="90%"
                   top="10vh"
                   :fullscreen="fullscreen"
        >
            <div>
                <dialog-tools
                        v-bind:back="true"
                        v-bind:next="true"
                        v-bind:goback="true"
                        v-bind:prev="true"
                        v-bind:screen="true"
                        @clickfullscreen="clickfullscreen"
                >
                </dialog-tools>
                <el-form id="pricesManages" size="mini" :model="customer" label-width="100px">
                    <el-form-item label="订单单号" prop="name">
                        <el-input v-model="customer.name" auto-complete="off" class="clientName"></el-input>
                    </el-form-item>

                    <el-form-item label="客户名称">
                        <el-input v-model="customer.customercode" auto-complete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="客户代码" prop="customercate">
                        <el-input v-model="customer.bankaccount" auto-complete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="联系人" prop="creditrank">
                        <el-input v-model="customer.certificateno" auto-complete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="电话">
                        <el-input v-model="customer.creditline" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机">
                        <el-input v-model="customer.capital" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="customer.annualsales" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="币种">
                        <el-select v-model="customer.customercate" filterable style="width:100%;">
                            <el-option v-for="item in crmsclientRank" :label="item.typename"
                                       :value="item.typename"></el-option>
                        </el-select>

                    </el-form-item>
                    <el-form-item label="汇率">
                        <el-input v-model="customer.bank" auto-complete="off"></el-input>

                    </el-form-item>

                    <el-form-item label="配送方式">
                        <el-select v-model="customer.creditrank" filterable style="width:100%;">
                            <el-option v-for="item in crmsclientStatic" :label="item.typename"
                                       :value="item.typename"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="结算方式">
                        <el-select v-model="customer.creditrank" filterable style="width:100%;">
                            <el-option v-for="item in crmsclientStatic" :label="item.typename"
                                       :value="item.typename"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="收货地址">
                        <el-input v-model="customer.address" auto-complete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="销售代表">
                        <el-input v-model="customer.area" auto-complete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="开票类型">
                        <el-input v-model="customer.brand" auto-complete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="制单人">
                        <el-input v-model="customer.address" placeholder="吴先生" :disabled="true" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
            </div>

            <div>
                <el-table :data="tableDatas" show-summary border stripe style="width: 100%;">

                    <el-table-column prop="name" width="150" fixed label="物品名称">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="添加模糊搜索"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" fixed label="款号">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="物品等级">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="金料品类">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="型号">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="规格">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="尺寸">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="颜色">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="品牌">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="客户单位货重">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="客户单位净金重">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="单位">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="数量">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="主石名称">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="主石编号">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="主石数量">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="主石克拉重">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="副石名称">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="副石编号">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="副石数量">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="副石克拉重">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="主石数量">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="主石克拉重">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="出厂单价">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="含税出厂价">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="销售单价">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="销售类别">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="包装方式">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="证书">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="产品图片">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" width="150" label="版模状态">
                        <template slot-scope="scope">
                            <el-input v-if="scope.row.edit" v-model="scope.row.name" placeholder="姓名"></el-input>
                            <span v-else>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>


                    <el-table-column prop="sex" label="电绘设计状态">
                        <template slot-scope="scope">
                            <el-select v-if="scope.row.edit" v-model="scope.row.sex" placeholder="请选择">
                                <el-option label="有" value="1">有</el-option>
                                <el-option label="无" value="2">无</el-option>
                            </el-select>
                            <span v-else>
                              <p v-if="scope.row.sex==1">有</p>
                              <p v-if="scope.row.sex==2">无</p>
                            </span>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" fixed>
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.edit" type="text" size="medium" @click="confirmAdd(scope.row)">
                                <i class="el-icon-check" aria-hidden="true"></i>
                            </el-button>
                            <div v-else>
                                <el-button type="text" size="medium" @click="editData(scope.row)">
                                    <i class="el-icon-edit" aria-hidden="true"></i>
                                </el-button>
                                <el-button type="text" size="medium" @click="deleteData(scope.row,scope.$index)">
                                    <i class="el-icon-delete" aria-hidden="true"></i>
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>

                <el-button type="text" @click="addData">添加数据</el-button>

                <el-input v-model="customer.name" placeholder="备注"></el-input>
                <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                    <el-button size="small" type="primary">上传附件</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>

                <el-divider></el-divider>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogCostoms = false">打 印</el-button>
                <el-button @click="dialogCostoms = false">取 消</el-button>
                <el-button type="primary" @click="dialogAdd">确定提交审核</el-button>
            </div>
        </el-dialog>


        <el-dialog id="changeCustomerDialog" title="移交客户" :visible.sync="dialogCostomsChange" style="display:none;">
            <el-form size="mini" :model="customer" label-width="100px">
                <el-form-item label="客户姓名" prop="name">
                    <el-input v-model="customer.name" placeholder="选择的客户名称" class="clientName"
                              :disabled="true"></el-input>
                </el-form-item>

                <el-form-item label="客服姓名">
                    <el-input v-model="customer.address" placeholder="旧客服" disabled
                              auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="交接客服人员" prop="customercate">
                    <el-select v-model="customer.customercate" filterable style="width:100%;">
                        <el-option v-for="item in customerstaffs" :label="item.typename"
                                   :value="item.typename"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="交接原因" prop="creditrank">
                    <el-select v-model="customer.creditrank" filterable style="width:100%;">
                        <el-option v-for="item in changeReason" :label="item.typename"
                                   :value="item.typename"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="备注" prop="name">
                    <el-input v-model="customer.name" placeholder="当选择其他必须填写" class="clientName"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogCostomsChange = false">取 消</el-button>
                <el-button type="primary" @click="dialogAdd">确定提交审核</el-button>
            </div>
        </el-dialog>




        <change-customer v-bind:dialogshow="dialogChangeCustomer" @dialog_close="change_customer_dialog_close"></change-customer>

        <send-message v-bind:dialogshow="dialogSendMessage" @dialog_close="send_message_dialog_close"></send-message>
        <send-weixin v-bind:dialogshow="dialogWeixin" @dialog_close="send_weixin_dialog_close"></send-weixin>
        <send-email v-bind:dialogshow="dialogEmail" @dialog_close="send_email_dialog_close"></send-email>
    </div>
</template>

<style>
    .col-md-12 {
        display: block;
        overflow: hidden;
        background-color: #f5f5f5;
    }

    .tableHeader th {
        background-color: #f5f5f5 !important;
        /*color: #000000;*/
        /*border-color: #c5c5c5;*/
    }

    .el-tabs__content {
        padding: 0px !important;
    }

    .ml-10 {
        margin-left: 10px;
    }

    .mg-10 {
        margin: 10px;
    }

    .mr-10 {
        margin-right: 10px;
    }

    #customerDialog .el-dialog__body .el-form-item {
        width: 45%;
        float: left;
        margin-bottom: 5px;
    }

    #customerDialog .el-dialog__body .el-form-item:nth-child(odd) {
        float: right;
    }

    #customerDialog .el-dialog__footer {
        clear: both;
    }

    .tableRow {
        cursor: pointer;
    }
</style>

<script>
  module.exports = {
    methods: {
      handleClick (row) {
        console.log(row)
      },
      handleSelectionChange (val) {
        //显示弹框
        console.log(333)
        this.dialogCostoms = true
      },

      openChangeCustomerDialog (val) {
        this.dialogCostomsChange = true
      },

      handleDelCustomer(val){
        // 删除操作
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });

      },

      handleImport(val){
        if (val === 1) {
          //导入操作
          this.$alert('打开文件夹导入工作', '导入', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'success',
                message: '导入成功'
              });
            }
          });
        }else{
          //导出操作
          this.$alert('打开文件夹导出工作', '导出', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'success',
                message: '导出表格成功'
              });
            }
          });
        }
      },

      handleButtons(val){
        switch(val){
          case 1:
            this.dialogSendMessage = 'true'
            console.log(this.dialogSendMessage)
            break;
          case 2:
            this.dialogWeixin = 'true'
            console.log(this.dialogWeixin)
            break;
          case 3:
            this.dialogEmail = 'true'
            console.log(this.dialogEmail)
            break;
          case 4:
            this.dialogChangeCustomer = 'true'
            console.log(this.dialogChangeCustomer)
            break;
          case 6:
            this.$confirm('是否继续操作?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              })
            })
            break;
        }

      },
      handleChangeCustomer(val){
        this.dialogChangeCustomer = 'true'
        console.log(this.dialogChangeCustomer)
      },
      dialogAdd () {
        console.log(123)
      },
      getSummaries (param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价'
            return
          }
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] += ' 元'
          } else {
            sums[index] = ''
          }
        })

        return sums
      },
      showHide (text) {
        console.log(text)
      },
      send_message_dialog_close(val){
        console.log(val)
        this.dialogSendMessage = false
      },
      send_weixin_dialog_close(val){
        this.dialogWeixin = false
      },
      send_email_dialog_close(val){
        this.dialogEmail = false
      },
      change_customer_dialog_close(val){
        console.log(val)
        this.dialogChangeCustomer = false
      },
      addData() {
        this.tableDatas.push({
          edit: true,
        });
      },
      //确认添加
      confirmAdd(row) {
        row.edit = false;
      },
      //修改
      editData(row) {
        row.edit = true;
      },
      //删除
      deleteData(row, index) {
        this.tableDatas.splice(index, 1);
      },
      handleClick (row) {
        console.log(row)
        console.log(22)

        this.dialogHistoryPricesList = true


        event.preventDefault();

        event.stopPropagation();
      },
      clickfullscreen () {
        this.fullscreen = !this.fullscreen
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 2) {
          return {
            rowspan: row.rowspan,
            colspan: 1
          }
          // if(this.arrs.indexOf(row.sale_no) === -1){
          //   console.log(row.sale_no)
          //   this.arrs.push(row.sale_no)
          //   console.log(this.arrs)
          //   return {
          //     rowspan: 2,
          //     colspan: 1
          //   };
          // }else {
          //   return {
          //     rowspan: 0,
          //     colspan: 0
          //   };
          // }
        }



        // if (columnIndex === 2) {
        //   console.log(row)
        //   if (rowIndex % 2 === 0) {
        //     return {
        //       rowspan: 2,
        //       colspan: 1
        //     };
        //   } else {
        //     return {
        //       rowspan: 0,
        //       colspan: 0
        //     };
        //   }
        // }
      },
    },

    data () {
      return {
        fullscreen: false,

        tableDatas:[],
        dialogCostoms: false,
        dialogCostomsChange: false,
        dialogSendMessage:false,
        dialogWeixin:false,
        dialogEmail:false,
        dialogChangeCustomer:false,     //客户跟进
        customer: {
          name: '',
          customercode: '',
          customerstatus: '',
          customercate: '',
          creditrank: '',
          creditline: '',
          capital: '',
          annualsales: '',
          bank: '',
          certificateno: '',
          address: '',
          area: '',
          brand: '',
          bankaccount: '',
          trademark: '',
          website: '',
          lperson: '',
          lphone: '',
          contacts: '',

          phone: '',
          phonenum: '',
          weixin: '',
          email: '',
          fax: '',
          resource: '',
          requirement: '',
          ordercountmonth: '',
          purchaseamountmonth: '',
          ordercountyear: '',
          purchaseamountyear: '',
          customerstaffname: '',
          customerstaffcode: '',
          operator: '',
          insertime: '',
          remark: '',
        },

        form: {
          typeId: ''
        },

        select: {
          name: '',
          introduce: '',
          cooperative_brand: '',
          customer_status: '',
          customer_level: '',
          now_principal_id: '',
          last_follow_up_date: '',
          create_date: '',
        },

        crmsclientStatic: [
          { typename: 'A级' },
          { typename: 'B级' },
          { typename: 'C级' },
          { typename: 'D级' },
        ],

        crmsclientRank: [
          { typename: 'A类' },
          { typename: 'B类' },
          { typename: 'C类' },
          { typename: 'D类' },
        ],

        customerstaffs: [
          { typename: '客服1' },
          { typename: '客服2' },
          { typename: '客服3' },
          { typename: '客服4' },
        ],

        changeReason: [
          { typename: '交接原因一' },
          { typename: '交接原因二' },
          { typename: '交接原因三' },
          { typename: '其他' },
        ],

        options1: [],

        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },  //日期控件
        pickerOptions1: {
          disabledDate (time) {
            return time.getTime() > Date.now()
          },
          shortcuts: [{
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        }, //首次合作日期

        showCustomerCode: true,
        showCustomerStatus: true,
        showCustomerCate: true,
        showCreditRank: true,
        showCreditLine: true,
        showCapital: true,
        showAnnualSales: true,
        showBank: true,
        showCertificateNo: true,
        showAddress: true,
        showArea: true,
        showBrand: true,
        showBankAccount: true,
        showTrademark: true,
        showWebsite: true,
        showLperson: true,
        showLphone: true,
        showContacts: true,

        showPhone: true,
        showPhoneNum: true,
        showWeixin: true,
        showEmail: true,
        showFax: true,
        showResource: true,
        showRequirement: true,
        showOrderCountMonth: true,
        showPurchaseAmountMonth: true,
        showOrderCountYear: true,
        showPurchaseAmountYear: true,
        showCustomerStaffName: true,
        showCustomerStaffCode: true,
        showOperator: true,
        showInsertime: true,
        showRemark: true,


        tableData: [{
          date: '2016-05-02',
          id: '1',
          name: '王小虎',
          province: 'BC1001',
          city: '合作中',
          address: 'A类',
          zip: ''
        }, {
          id: '2',
          date: '2016-05-04',
          name: '王小虎1',
          province: 'BC1002',
          city: '未合作',
          address: 'A类',
          zip: ''
        }, {
          id: '3',
          date: '2016-05-01',
          name: '王小虎2',
          province: 'BC1003',
          city: '中断',
          address: 'A类',
          zip: ''
        }, {
          id: '4',
          date: '2016-05-03',
          name: '王小虎3',
          province: 'BC1004',
          city: '未合作',
          address: 'A类',
          zip: ''
        }]
        ,
        multipleSelection: []
      }
    },
    components: {
      // 将组建加入组建库
      'send-message': 'url:./send-message.vue',
      'send-weixin': 'url:./send-weixin.vue',
      'send-email': 'url:./send-email.vue',
      'change-customer': 'url:./change-customer.vue',
      'dialog-tools': 'url:./tools/dialog-tools.vue',
      'input-search': 'url:./tools/input-search.vue',
      'foot-pagination': 'url:./tools/foot-pagination.vue',

    },
  }
</script>
